<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
        Java-front-JavaScript - rulerLwx Blog
      </title>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    
    <meta name="theme-color" content="#000000" />
    
    <meta http-equiv="window-target" content="_top" />
    
    
    <meta name="description" content="ECMAScript &amp;amp; JavaScript ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECM" />
    <meta name="generator" content="Hugo 0.73.0 with theme pure" />
    <title>Java-front-JavaScript - rulerLwx Blog</title>
    
    
    <link rel="stylesheet" href="https://rulerLwx.gitee.io/css/style.min.c4bc7071f132c964c2116bca53b392933f377e5ca7b7051ed245187c621a2d3e.css">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/9.15.10/styles/github.min.css" async>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css" async>
    <meta property="og:title" content="Java-front-JavaScript" />
<meta property="og:description" content="ECMAScript &amp; JavaScript ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECM" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://rulerLwx.gitee.io/2020/07/java-front-javascript/" />
<meta property="article:published_time" content="2020-07-01T18:58:47+08:00" />
<meta property="article:modified_time" content="2020-07-01T18:58:47+08:00" />
<meta itemprop="name" content="Java-front-JavaScript">
<meta itemprop="description" content="ECMAScript &amp; JavaScript ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECM">
<meta itemprop="datePublished" content="2020-07-01T18:58:47&#43;08:00" />
<meta itemprop="dateModified" content="2020-07-01T18:58:47&#43;08:00" />
<meta itemprop="wordCount" content="4353">



<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Java-front-JavaScript"/>
<meta name="twitter:description" content="ECMAScript &amp; JavaScript ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECM"/>

    <!--[if lte IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
      <![endif]-->

    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
      <![endif]-->
  </head>

  
  

  <body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader">
    <div class="slimContent">
      <div class="navbar-header">
        <div class="profile-block text-center">
          <a id="avatar" href="https://gitee.com/rulerLwx" target="_blank">
            <img class="img-circle img-rotate" src="https://rulerLwx.gitee.io/avatar.png" width="200" height="200">
          </a>
          <h2 id="name" class="hidden-xs hidden-sm">rulerLwx</h2>
          <h3 id="title" class="hidden-xs hidden-sm hidden-md">thinking...</h3>
          <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i>Guangzhou, China</small>
        </div><div class="search" id="search-form-wrap">
    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i
                        class="icon icon-search"></i></button>
            </span>
        </div>
        <div class="ins-search">
            <div class="ins-search-mask"></div>
            <div class="ins-search-container">
                <div class="ins-input-wrapper">
                    <input type="text" class="ins-search-input" placeholder="Type something..."
                        x-webkit-speech />
                    <button type="button" class="close ins-close ins-selectable" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="ins-section-wrapper">
                    <div class="ins-section-container"></div>
                </div>
            </div>
        </div>
    </form>
</div>
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
        <ul class="nav navbar-nav main-nav">
            <li class="menu-item menu-item-home">
                <a href="/">
                    <i class="icon icon-home-fill"></i>
                  <span class="menu-title">Home</span>
                </a>
            </li>
            <li class="menu-item menu-item-archives">
                <a href="/posts/">
                    <i class="icon icon-archives-fill"></i>
                  <span class="menu-title">Archives</span>
                </a>
            </li>
            <li class="menu-item menu-item-categories">
                <a href="/categories/">
                    <i class="icon icon-folder"></i>
                  <span class="menu-title">Categories</span>
                </a>
            </li>
            <li class="menu-item menu-item-tags">
                <a href="/tags/">
                    <i class="icon icon-tags"></i>
                  <span class="menu-title">Tags</span>
                </a>
            </li>
            <li class="menu-item menu-item-about">
                <a href="/about/">
                    <i class="icon icon-cup-fill"></i>
                  <span class="menu-title">About</span>
                </a>
            </li>
        </ul>
      </nav>
    </div>
  </header>

<aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">enjoy~
            </div>
        </div>
    </div>
</div>

      <div class="widget">
    <h3 class="widget-title"> Categories</h3>
    <div class="widget-body">
        <ul class="category-list">
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-framework/" class="category-list-link">java-framework</a><span class="category-list-count">38</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-front-end/" class="category-list-link">java-front-end</a><span class="category-list-count">11</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-se/" class="category-list-link">java-se</a><span class="category-list-count">21</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/java-senior/" class="category-list-link">java-senior</a><span class="category-list-count">4</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/linux/" class="category-list-link">linux</a><span class="category-list-count">13</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/tools/" class="category-list-link">tools</a><span class="category-list-count">1</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/%E6%8A%80%E6%9C%AF%E6%9D%82%E7%83%A9/" class="category-list-link">技术杂烩</a><span class="category-list-count">4</span></li>
            <li class="category-list-item"><a href="https://rulerLwx.gitee.io/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/" class="category-list-link">数据库</a><span class="category-list-count">15</span></li>
        </ul>
    </div>
</div>
      <div class="widget">
    <h3 class="widget-title"> Tags</h3>
    <div class="widget-body">
        <ul class="tag-list">
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/jvm/" class="tag-list-link">jvm</a><span
                    class="tag-list-count">1</span></li>
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/%E5%A4%9A%E7%BA%BF%E7%A8%8B/" class="tag-list-link">多线程</a><span
                    class="tag-list-count">2</span></li>
            
            
            <li class="tag-list-item"><a href="https://rulerLwx.gitee.io/tags/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/" class="tag-list-link">网络编程</a><span
                    class="tag-list-count">3</span></li>
            
        </ul>

    </div>
</div>
      
<div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
        <ul class="recent-post-list list-unstyled no-thumbnail">
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E8%87%AA%E5%B7%B1%E5%8A%A8%E6%89%8B%E4%B8%80%E6%89%B9%E9%87%8F%E7%A7%BB%E5%8A%A8%E9%87%8D%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6/" class="title">自己动手（一）——批量移动、重命名文件</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-27 17:50:02 &#43;0800 CST" itemprop="datePublished">2020-07-27</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E5%85%B3%E4%BA%8Einteger%E7%9A%84-128~127%E7%BC%93%E5%AD%98/" class="title">关于Integer的 -128~127缓存</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-11 16:56:21 &#43;0800 CST" itemprop="datePublished">2020-07-11</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/" class="title">跨域问题</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-08 22:41:12 &#43;0800 CST" itemprop="datePublished">2020-07-08</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" class="title">个人博客搭建</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-05 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-05</time>
                    </p>
                </div>
            </li>
            <li>
                <div class="item-inner">
                    <p class="item-title">
                        <a href="https://rulerLwx.gitee.io/2020/07/centos/" class="title">CentOS-</a>
                    </p>
                    <p class="item-date">
                        <time datetime="2020-07-01 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-01</time>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
  </div>
</aside>

    
    
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    <h4 class="toc-title">Catalogue</h4>
    <nav id="toc" class="js-toc toc">

    </nav>
  </div>
</aside>
<main class="main" role="main"><div class="content">
  <article id="-" class="article article-type-" itemscope
    itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      <h1 itemprop="name">
  <a
    class="article-title"
    href="/2020/07/java-front-javascript/"
    >Java-front-JavaScript</a
  >
</h1>

      <div class="article-meta">
        
<span class="article-date">
  <i class="icon icon-calendar-check"></i>&nbsp;
<a href="https://rulerLwx.gitee.io/2020/07/java-front-javascript/" class="article-date">
  <time datetime="2020-07-01 18:58:47 &#43;0800 CST" itemprop="datePublished">2020-07-01</time>
</a>
</span>
<span class="article-category">
  <i class="icon icon-folder"></i>&nbsp;
  <a class="article-category-link" href="/categories/java-front-end/"> Java-front-end </a>
</span>

        <span class="post-comment"><i class="icon icon-comment"></i>&nbsp;<a href="/2020/07/java-front-javascript/#comments"
            class="article-comment-link">Comments</a></span>
		<span class="post-wordcount hidden-xs" itemprop="wordCount">Word Count: 4353words</span>
		<span class="post-readcount hidden-xs" itemprop="timeRequired">Read Count: 9minutes </span>
      </div>
    </div>
    <div class="article-entry marked-body js-toc-content" itemprop="articleBody">
      <h1 id="ecmascript--javascript">ECMAScript &amp; JavaScript</h1>
<blockquote>
<p>ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。&mdash;-<a href="https://baike.baidu.com/item/ECMAScript/1889420?fr=aladdin">百度百科</a></p>
</blockquote>
<blockquote>
<p>查看w3school的<a href="http://www.w3school.com.cn/jsref/dom_obj_window.asp">javascript对象</a>手册 ，会有很大帮助。</p>
</blockquote>
<p>JavaScript 是 ECMAScript 规范的一种实现。</p>
<h1 id="基础知识">基础知识</h1>
<h2 id="js脚本位置">js脚本位置</h2>
<ul>
<li>
<p>HTML中的脚本必须位于<code>&lt;script&gt;</code>和<code>&lt;/script&gt;</code> 之间，那些老旧的实例可能会在 <code>&lt;script&gt;</code> 标签中使用 type=&quot;text/javascript&rdquo;。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。</p>
</li>
<li>
<p>脚本可被放置在HTML页面的<code>&lt;body&gt;</code>和<code>&lt;head&gt;</code>中，或者同时存在于两个部分中。通常的做法是把函数放入 <code>&lt;head&gt;</code> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。</p>
</li>
<li>
<p>把脚本放在body中和head中，有什么区别吗？</p>
</li>
</ul>
<blockquote>
<ul>
<li>在HTML body部分中的JavaScripts会在页面加载的时候被执行。</li>
<li>在HTML head部分中的JavaScripts会在被调用的时候才执行。
&mdash;- <a href="%5Bhttp://www.imooc.com/wiki/view?pid=143%5D">Js放在head和body中的区别</a></li>
</ul>
</blockquote>
<h2 id="js数据类型">js数据类型</h2>
<p>字符串、数字、布尔、数组、对象、Null、Undefined。</p>
<ul>
<li>JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。</li>
<li>极大或极小的数字可以通过科学（指数）计数法来书写</li>
</ul>
<pre><code class="language-javascript">    var y=123e5;      // 12300000
    var z=123e-5;     // 0.00123
</code></pre>
<ul>
<li>数组</li>
</ul>
<pre><code class="language-javascript">    var cars=new Array();
    cars[0]=&quot;Audi&quot;;
    cars[1]=&quot;BMW&quot;;
    cars[2]=&quot;Volvo&quot;;
    或
    var cars=new Array(&quot;Audi&quot;,&quot;BMW&quot;,&quot;Volvo&quot;);
    或
    var cars=[&quot;Audi&quot;,&quot;BMW&quot;,&quot;Volvo&quot;];
</code></pre>
<p>数组下标是基于零的，所以第一个项目是 [0]，第二个是 <a href="%5Bhttp://www.imooc.com/wiki/view?pid=143%5D">1</a>，以此类推</p>
<ul>
<li>对象</li>
</ul>
<p>对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：</p>
<pre><code class="language-javascript">    var person={firstname:&quot;Bill&quot;, lastname:&quot;Gates&quot;, id:5566};
    或
    var person={
        firstname : &quot;Bill&quot;,
        lastname  : &quot;Gates&quot;,
        id        :  5566
    };
</code></pre>
<p>对象属性有两种寻址方式：</p>
<pre><code class="language-javascript">    name=person.lastname;
    name=person[&quot;lastname&quot;];
</code></pre>
<ul>
<li>声明变量类型</li>
</ul>
<p>也可以采用声明式来创建数据类型：</p>
<pre><code class="language-javascript">    var carname=new String;
    var x=      new Number;
    var y=      new Boolean;
    var cars=   new Array;
    var person= new Object;
</code></pre>
<h2 id="比较--运算符">比较 &amp; 运算符</h2>
<ul>
<li>比较运算符,&hellip;</li>
<li>逻辑运算符,&hellip;</li>
<li>条件运算符，<code>variablename=(condition)?value1:value2 </code></li>
</ul>
<h2 id="ifelse---switch-语句">If&hellip;Else  &amp; Switch 语句</h2>
<pre><code class="language-js">    if (条件)
      {
        当条件为 true 时执行的代码
      }
    else
      {
        当条件不为 true 时执行的代码
      }

      或：

    if (条件 1)
      {
        当条件 1 为 true 时执行的代码
      }
    else if (条件 2)
      {
        当条件 2 为 true 时执行的代码
      }
    else
      {
        当条件 1 和 条件 2 都不为 true 时执行的代码
      }

    switch(n)
    {
        case 1:
          执行代码块 1
          break;
        case 2:
          执行代码块 2
          break;
        default:
          n 与 case 1 和 case 2 不同时执行的代码
    }
</code></pre>
<h2 id="for--while-循环">For &amp; While 循环</h2>
<pre><code class="language-js">    for (var i=0;i&lt;cars.length;i++)
    {
        document.write(cars[i] + &quot;&lt;br&gt;&quot;);
    }
    或
    var person={fname:&quot;John&quot;,lname:&quot;Doe&quot;,age:25};
    for (x in person)
    {
      txt=txt + person[x];
    }

    while (条件)
    {
      需要执行的代码
    }
    或
    do
    {
      需要执行的代码
    }
    while (条件);
</code></pre>
<p>-break 语句用于跳出循环。<br>
-continue 用于跳过循环中的一个迭代。</p>
<p><strong>JavaScript 标签</strong>:如需标记 JavaScript 语句，请在语句之前加上冒号</p>
<pre><code class="language-js">    语法：
    label:
    语句

    break labelname;
    continue labelname;

-continue 语句（带有或不带标签引用）只能用在循环中。
-break 语句（不带标签引用），只能用在循环或 switch 中。
-通过标签引用，break 语句可用于跳出任何 JavaScript 代码块
</code></pre>
<h2 id="异常处理">异常处理</h2>
<pre><code class="language-js">    语法：
    try
    {
        //在这里运行代码
    }
    catch(err)
    {
        //在这里处理错误
    }

</code></pre>
<p>代码片段：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
    var txt=&quot;&quot;;
    function message()
    {
    try
      {
      adddlert(&quot;Welcome guest!&quot;);
      }
    catch(err)
      {
      txt=&quot;There was an error on this page.\n\n&quot;;
      txt+=&quot;Error description: &quot; + err.message + &quot;\n\n&quot;;
      txt+=&quot;Click OK to continue.\n\n&quot;;
      alert(txt);
      }
    }
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;input type=&quot;button&quot; value=&quot;View message&quot; onclick=&quot;message()&quot;&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p>如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。</p>
<pre><code class="language-js">    语法：
    throw exception
</code></pre>
<pre><code class="language-javascript">&lt;script&gt;
    function myFunction()
    {
        try
        {
          var x=document.getElementById(&quot;demo&quot;).value;
          if(x==&quot;&quot;)    throw &quot;empty&quot;;
          if(isNaN(x)) throw &quot;not a number&quot;;
          if(x&gt;10)     throw &quot;too high&quot;;
          if(x&lt;5)      throw &quot;too low&quot;;
        }
        catch(err)
        {
          var y=document.getElementById(&quot;mess&quot;);
          y.innerHTML=&quot;Error: &quot; + err + &quot;.&quot;;
        }
    }
&lt;script&gt;
</code></pre>
<p>可以自定义异常哦！</p>
<h2 id="增加--删除-元素">增加 &amp; 删除 元素</h2>
<ul>
<li>如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。</li>
</ul>
<pre><code class="language-html">&lt;div id=&quot;div1&quot;&gt;
&lt;p id=&quot;p1&quot;&gt;这是一个段落&lt;/p&gt;
&lt;p id=&quot;p2&quot;&gt;这是另一个段落&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
var para=document.createElement(&quot;p&quot;);
var node=document.createTextNode(&quot;这是新段落。&quot;);
para.appendChild(node);

var element=document.getElementById(&quot;div1&quot;);
element.appendChild(para);
&lt;/script&gt;
</code></pre>
<ul>
<li>如需删除 HTML 元素，您必须首先获得该元素的父元素</li>
</ul>
<pre><code class="language-js">    var child=document.getElementById(&quot;p1&quot;);
    child.parentNode.removeChild(child);
</code></pre>
<h1 id="对象">对象</h1>
<h2 id="js-对象">JS 对象</h2>
<blockquote>
<p>JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等,对象是拥有属性和方法的数据。</p>
</blockquote>
<p>实际上，<code>var txt = &quot;Hello&quot;;</code>就已经创建了一个 JavaScript 字符串对象,此对象拥有相应的属性和方法，如<code>txt.length = 5</code>,<code>txt.indexOf()</code>方法。</p>
<p>创建一个对象有两种方式：</p>
<ul>
<li>直接声明法，如 var txt = &ldquo;Hello&rdquo;;</li>
<li>new Object() 法，如</li>
</ul>
<pre><code class="language-js">    person=new Object();
    person.firstname=&quot;Bill&quot;;
    person.lastname=&quot;Gates&quot;;
    person.age=56;
    person.eyecolor=&quot;blue&quot;;
</code></pre>
<p>-访问对象的属性</p>
<pre><code class="language-js">    语法：
    objectName.propertyName

    如：
    var message=&quot;Hello World!&quot;;
    var x=message.length;
</code></pre>
<p>-访问对象的方法</p>
<pre><code class="language-js">    语法：
    objectName.methodName()

    如：
    var message=&quot;Hello world!&quot;;
    var x=message.toUpperCase();    
</code></pre>
<hr>
<h3 id="自定义对象">自定义对象</h3>
<p>创建自定义对象有三种不同的方法：</p>
<ul>
<li>① 定义并创建对象的实例</li>
<li>② 使用函数来定义对象，然后创建新的对象实例</li>
<li>③ Object.create()方法</li>
</ul>
<p>每一种创建方式继承的原型对象都不同：</p>
<ul>
<li>① 对象直接量：原型为Object.prototype。</li>
<li>② new 构造函数：原型为构造函数的prototype属性。</li>
<li>③ Object.create()：原型为传入的第一个参数，若第一个参数为null，以Object.prototype为原型。&mdash;<a href="http://www.cnblogs.com/polk6/p/4492757.html">JavaScript 自定义对象</a></li>
</ul>
<h4 id="创建直接的实例">创建直接的实例</h4>
<pre><code class="language-js">    person=new Object();
    person.firstname=&quot;Bill&quot;;
    person.lastname=&quot;Gates&quot;;
    person.age=56;
    person.eyecolor=&quot;blue&quot;;
    或
    person={firstname:&quot;John&quot;,lastname:&quot;Doe&quot;,age:50,eyecolor:&quot;blue&quot;};
</code></pre>
<h4 id="使用对象构造器">使用对象构造器</h4>
<p>使用函数来构造对象</p>
<pre><code class="language-js">    function person(firstname,lastname,age,eyecolor)
    {
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
        this.eyecolor=eyecolor;
    }
</code></pre>
<p>一旦您有了对象构造器，就可以创建新的对象实例，就像这样：</p>
<pre><code class="language-js">    var myFather=new person(&quot;Bill&quot;,&quot;Gates&quot;,56,&quot;blue&quot;);
    var myMother=new person(&quot;Steve&quot;,&quot;Jobs&quot;,48,&quot;green&quot;);
</code></pre>
<p>向已有对象添加新属性：</p>
<pre><code class="language-js">    person.firstname=&quot;Bill&quot;;
    person.lastname=&quot;Gates&quot;;
    person.age=56;
    person.eyecolor=&quot;blue&quot;;
</code></pre>
<p>把方法添加到对象（在构造器函数内部定义对象的方法）：</p>
<pre><code class="language-javascript">    function person(firstname,lastname,age,eyecolor)
    {
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
        this.eyecolor=eyecolor;

        this.changeName=changeName;

        function changeName(name)
        {
            this.lastname=name;
        }
    }
</code></pre>
<p><em>注意</em>：
JavaScript 是面向对象的语言，但 JavaScript 不使用类。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript 基于 prototype，而不是基于类的。</p>
<h4 id="prototype--_proto_-属性">prototype &amp; <em>proto</em> 属性</h4>
<blockquote>
<p>prototype 属性使您有能力向对象添加属性和方法。</p>
</blockquote>
<pre><code class="language-javascript">    &lt;script type=&quot;text/javascript&quot;&gt;

        function employee(name,job,born)
        {
            this.name=name;
            this.job=job;
            this.born=born;
        }

        var bill=new employee(&quot;Bill Gates&quot;,&quot;Engineer&quot;,1985);

        employee.prototype.salary=null;
        bill.salary=20000;

        document.write(bill.salary);

    &lt;script&gt;
</code></pre>
<blockquote>
<ol>
<li>__proto__是每个对象都有的一个属性，而prototype是函数才会有的属性。</li>
<li>__proto__指向的是当前对象的原型对象，而prototype指向的，是以当前函数作为构造函数构造出来的对象的原型对象。&mdash;<a href="https://www.zhihu.com/question/34183746">知乎</a></li>
</ol>
</blockquote>
<p>顶层的原型是Object.prototype。</p>
<p>参看:<a href="http://www.cnblogs.com/polk6/p/4492757.html">JavaScript 自定义对象</a>,<a href="https://www.zhihu.com/question/34183746">js中__proto__和prototype的区别和关系</a></p>
<p><em>因此，通过设置prototype可以实现js之间的继承关系。</em></p>
<h4 id="constructor-属性">constructor 属性</h4>
<blockquote>
<p>constructor 属性返回对创建此对象的 xxx 函数的引用。</p>
</blockquote>
<pre><code class="language-javascript">    &lt;script type=&quot;text/javascript&quot;&gt;

        var test=new Date();

        if (test.constructor==Array)
        {
            document.write(&quot;This is an Array&quot;);
        }
        if (test.constructor==Boolean)
        {
            document.write(&quot;This is a Boolean&quot;);
        }
        if (test.constructor==Date)
        {
            document.write(&quot;This is a Date&quot;);
        }
        if (test.constructor==String)
        {
            document.write(&quot;This is a String&quot;);
        }

    &lt;script&gt;
</code></pre>
<h2 id="browser-对象">Browser 对象</h2>
<h3 id="window">window</h3>
<p>Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。</p>
<p>例如，可以只写 document，而不必写 window.document。</p>
<h3 id="document">document</h3>
<h2 id="html-dom-对象">HTML DOM 对象</h2>
<h2 id="html-对象">HTML 对象</h2>
<h1 id="函数">函数</h1>
<blockquote>
<p>函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。</p>
</blockquote>
<h2 id="语法">语法</h2>
<pre><code class="language-js">    语法：
    function functionname()
    {
        这里是要执行的代码
    }
    或
    function myFunction(var1,var2)
    {
        这里是要执行的代码
    }
</code></pre>
<p>function是关键词。函数可以有返回值，用return返回。</p>
<h2 id="变量--生命期">变量 &amp; 生命期</h2>
<ul>
<li>函数局部变量：声明在函数内部的变量（使用var）是局部变量，函数运行结束，局部变量就会被删除。</li>
<li>全局变量：声明在函数外的变量（使用var）是全局变量，页面关闭后，全局变量就被删除。</li>
<li>另外，赋值给未声明的变量（没有使用var），不管是函数内还是外，该变量将被自动作为全局变量。</li>
</ul>
<p>document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write(&ldquo;我的第一段 JavaScript&rdquo;)，整个 HTML 页面将被覆盖。</p>
<h1 id="事件">事件</h1>
<h2 id="onload--onunload">onload &amp; onunload</h2>
<ul>
<li>onload 和 onunload 事件会在用户进入或离开页面时被触发。</li>
<li>onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。</li>
<li>onload 和 onunload 事件可用于处理 cookie。</li>
</ul>
<pre><code class="language-js">    window.onload = function () {}
</code></pre>
<h2 id="onchange">onchange</h2>
<ul>
<li>onchange 事件常结合对输入字段的验证来使用</li>
</ul>
<h2 id="onmouseover--onmouseout">onmouseover &amp; onmouseout</h2>
<p>onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数</p>
<h2 id="onmousedown--onmouseup--onclick">onmousedown &amp; onmouseup &amp; onclick</h2>
<p>当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。</p>
<h2 id="疑问">疑问</h2>
<ul>
<li>onchange onclick执行的先后顺序</li>
<li>typeof</li>
</ul>
<h1 id="this">this</h1>
<pre><code class="language-js">JS 里的 this，有以下特点：

1、在 function 内部被创建
2、指向调用时所在函数所绑定的对象（拗口）
3、this 不能被赋值，但可以被 call/apply  改变


以前用 this 时经常担心，不踏实，你不知道它到底指向谁？ 这里把它所有用到的地方列出

this 和构造器
this 和对象
this 和函数
全局环境的 this
this 和 DOM/事件
this 可以被 call/apply 改变
me/self/that/_this 暂存 this
ES5 中新增的 bind 和 this
ES6 箭头函数(arrow function) 和 this

</code></pre>
<p>参考：<a href="http://www.cnblogs.com/snandy/p/4773184.html">JavaScript中知而不全的this</a>，对比参考：<a href="http://www.cnblogs.com/wangfupeng1988/p/3988422.html">深入理解javascript原型和闭包（10）——this</a></p>
<pre><code class="language-js">面试题：
var x = 10;
function func() {
    alert(this.x)
}
var obj = {
    x: 20,
    fn: function() {
        alert(this.x)
    }
}
var fn = obj.fn
func() // 10
fn() // 10

永远记住这一点：判断 this 指向谁，看执行时而非定义时，只要函数(function)没有绑定在对象上调用，它的 this 就是 window。

</code></pre>
<p>用原型链来理解？？？</p>
<p>总之，<strong>this 指向调用时所在函数所绑定的对象</strong>.这句话适用于this的所有场景。</p>
<h2 id="原型--闭包">原型 &amp; 闭包</h2>
<blockquote>
<p>__proto__是每个对象都有的一个属性，而prototype是函数才会有的属性。
__proto__指向的是当前对象的原型对象，而prototype指向的，是以当前函数作为构造函数构造出来的对象的原型对象。&mdash;<a href="https://www.zhihu.com/question/34183746">知乎</a></p>
</blockquote>
<p>函数的这个prototype的属性值是一个对象（属性的集合，再次强调！），它默认的只有一个叫做constructor的属性，指向这个函数本身。</p>
<p><em>proto</em> &amp; prototype 区别：</p>
<p><img src="1F7FD6F620FF48D095BC431D3D6AD918" alt="proto_protype区别"></p>
<p><strong>Instanceof的判断规则</strong>是：沿着A的__proto__这条线来找，同时沿着B的prototype这条线来找，如果两条线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。</p>
<p>instanceof表示的就是一种继承关系，或者原型链的结构。</p>
<p>在一段js代码拿过来真正一句一句运行之前，浏览器已经做了一些“准备工作”，其中就包括对变量的声明，而不是赋值。变量赋值是在赋值语句执行的时候进行的。</p>
<p>我们总结一下，在“准备工作”中完成了哪些工作：</p>
<ul>
<li>变量、函数表达式——变量声明，默认赋值为undefined；</li>
<li>this——赋值；</li>
<li>函数声明——赋值；</li>
</ul>
<p>这三种数据的准备情况我们称之为“执行上下文”或者“执行上下文环境”。</p>
<p>在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。</p>
<p>下面的this:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        function testOnclick(obj) {
            console.log(obj);           //&lt;input type=&quot;button&quot; value=&quot;点击我&quot; onclick=&quot;testOnclick(this)&quot; /&gt;
            console.log(obj.type);      //button
        }
    &lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;form&gt;
        &lt;input type=&quot;button&quot; value=&quot;点击我&quot; onclick=&quot;testOnclick(this)&quot; /&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>参考：<a href="http://www.cnblogs.com/wangfupeng1988/p/3977924.html">深入理解javascript原型和闭包（完结）</a></p>
<h2 id="ajax">Ajax</h2>
<h1 id="正则表达式">正则表达式</h1>
<h2 id="验证数字">验证数字</h2>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709012406.png" alt=""></p>
<p>原文：http://colbybobo.iteye.com/blog/1769993</p>
<p><img src="https://gitee.com/leafsing/pic/raw/master/img/20200709012509.png" alt=""></p>
<h1 id="q--a">Q &amp; A</h1>
<h2 id="判断当前浏览器">判断当前浏览器</h2>
<pre><code>function getOs() { 
    var OsObject = &quot;&quot;;  
    if (isIE = navigator.userAgent.indexOf(&quot;MSIE&quot;) != -1) {return &quot;MSIE&quot;;}
    if (isFirefox = navigator.userAgent.indexOf(&quot;Firefox&quot;) != -1) {return &quot;Firefox&quot;;  }
    if (isChrome = navigator.userAgent.indexOf(&quot;Chrome&quot;) != -1) {return &quot;Chrome&quot;;}
    if (isSafari = navigator.userAgent.indexOf(&quot;Safari&quot;) != -1) {return &quot;Safari&quot;;}
    if (isOpera = navigator.userAgent.indexOf(&quot;Opera&quot;) != -1) {return &quot;Opera&quot;;}
}
</code></pre>

    </div>
    <div class="article-footer">
<blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    <li class="post-copyright-link hidden-xs">
      <strong>Permalink: </strong>
      <a href="https://rulerLwx.gitee.io/2020/07/java-front-javascript/" title="Java-front-JavaScript" target="_blank" rel="external">https://rulerLwx.gitee.io/2020/07/java-front-javascript/</a>
    </li>
    <li class="post-copyright-license">
      <strong>License：</strong><a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN</a>
    </li>
  </ul>
</blockquote>

<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://gitee.com/rulerLwx" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="https://rulerLwx.gitee.io/avatar.png" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://gitee.com/rulerLwx" target="_blank"><span class="text-dark">rulerLwx</span><small class="ml-1x">thinking...</small></a></h3>
        <div>Good Good Study, Day Day Up~</div>
      </div>
    </figure>
  </div>
</div>
    </div>
  </article>
<section id="comments">
    <div id="vcomments"></div>
</section>

</div><nav class="bar bar-footer clearfix" data-stick-bottom>
    <div class="bar-inner">
        <ul class="pager pull-left">
            <li class="prev">
                <a href="https://rulerLwx.gitee.io/2020/07/java-front-jquery/" title="Java-front-JQuery"><i
                        class="icon icon-angle-left"
                        aria-hidden="true"></i><span>&nbsp;&nbsp;Older</span></a>
            </li>
            <li class="next">
                <a href="https://rulerLwx.gitee.io/2020/07/java-front-css/"
                    title="Java-front-CSS"><span>Newer&nbsp;&nbsp;</span><i
                        class="icon icon-angle-right" aria-hidden="true"></i></a>
            </li>
            
            <li class="toggle-toc">
                <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false"
                    title="Catalogue" role="button">
                    <span>[&nbsp;</span><span>Catalogue</span>
                    <i class="text-collapsed icon icon-anchor"></i>
                    <i class="text-in icon icon-close"></i>
                    <span>]</span>
                </a>
            </li>
        </ul>
        <div class="bar-right">
            <div class="share-component" data-sites="weibo,qq,wechat"
                data-mobile-sites="weibo,qq,qzone"></div>
        </div>
    </div>
</nav>

</main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
<ul class="social-links">
    <li><a href="https://gitee.com/rulerLwx" target="_blank" title="gitee" data-toggle=tooltip data-placement=top >
            <i class="icon icon-gitee"></i></a></li>
    <li><a href="https://github.com/wolf-lea" target="_blank" title="github" data-toggle=tooltip data-placement=top >
            <i class="icon icon-github"></i></a></li>
</ul>
  <div class="copyright">
    &copy;2020  -
    2020
    <div class="publishby">
        Theme by <a href="https://github.com/xiaoheiAh" target="_blank"> xiaoheiAh </a>base on<a href="https://github.com/xiaoheiAh/hugo-theme-pure" target="_blank"> pure</a>.
    </div>
  </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
            showMathMenu: false, //disables context menu
            tex2jax: {
            inlineMath: [ ['$','$'], ['\\(','\\)'] ]
           }
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/highlight.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/python.min.js" defer></script>
<script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/javascript.min.js" defer></script><script>
    hljs.configure({
        tabReplace: '    ', 
        classPrefix: ''     
        
    })
    hljs.initHighlightingOnLoad();
</script>
<script src="https://rulerLwx.gitee.io/js/application.min.bdeb64b910570b6c41badc6a05b7afb0c8ad9efd8525de3c7257d59e786326a3.js"></script>
<script src="https://rulerLwx.gitee.io/js/plugin.min.51ff8c7317566f82259170fa36e09c4493adc9b9378b427a01ad3f017ebac7dd.js"></script>

<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: 'Posts',
                PAGES: 'Pages',
                CATEGORIES: 'Categories',
                TAGS: 'Tags',
                UNTITLED: '(Untitled)',
            },
            ROOT_URL: 'https:\/\/rulerLwx.gitee.io',
            CONTENT_URL: 'https:\/\/rulerLwx.gitee.io\/searchindex.json ',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script type="text/javascript" src="https://rulerLwx.gitee.io/js/insight.min.a343cd9a5a7698336b28ef3a7c16a3a1b1d2d5fb17dc8ed04022bbe08cc5459073a15bdafa3a8a58cdd56080784bdd69fa70b1ae8597565c799c57ed00f0e120.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<script>
    tocbot.init({
        
        tocSelector: '.js-toc',
        
        contentSelector: '.js-toc-content',
        
        headingSelector: 'h1, h2, h3',
        
        hasInnerContainers: true,
    });
</script>

<script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine"></script>
<script type="text/javascript">
    var GUEST = ['nick', 'mail', 'link'];
    var meta = 'nick,mail';
    meta = meta.split(',').filter(function (item) {
        return GUEST.indexOf(item) > -1;
    });
    new Valine({
        el: '#vcomments',
        verify: null ,
        notify: null ,
        appId: 'IyAB0PSPRazTPDxitO1ddQ7O-gzGzoHsz',
        appKey: '5rBJTq4KidYF33eXwvRVhtEH',
        placeholder: 'enjoy~',
        avatar: 'mm',
        meta: meta,
        pageSize: '10' || 10,
        visitor: false 
});
</script>

  </body>
</html>
